<template>
  <div class="product-add">
    <el-tabs v-model="activeName" type="card">
      <el-tab-pane label="平台设置" name="plate"></el-tab-pane>
      <el-tab-pane label="会员设置" name="user"></el-tab-pane>
    </el-tabs>
    <!--form表单-->
    <el-form size="small" ref="form" :model="form" label-width="150px">
      <!--平台设置-->
      <Plate v-show="activeName == 'plate'" :allType="allType"></Plate>
      <!--会员设置-->
      <User v-show="activeName == 'user'"></User>

      <!--提交-->
      <div class="common-button-wrapper">
        <el-button type="primary" @click="onSubmit" :loading="loading"
          >提交</el-button
        >
      </div>
    </el-form>
  </div>
</template>

<script>
import SettingApi from "@/api/setting.js";
import Upload from "@/components/file/Upload.vue";

import Plate from "./part/Plate.vue";
import User from "./part/User.vue";
import { formatModel } from "@/utils/base.js";
import { useUserStore } from "@/store";
const { changStore, userInfo } = useUserStore();
export default {
  components: {
    Upload,
    Plate,
    User,
  },
  data() {
    return {
      activeName: "plate",
      /*是否正在加载*/
      loading: false,
      /*form表单数据*/
      form: {
        policy: {
          service: "",
          privacy: "",
        },
        name: "",
        kuaiDi100: {
          customer: "",
          key: "",
          secret: "",
        },
        supplierCash: "",
        operateType: "",
        commissionRate: "",
        supplierImage: "",
        supplierLogo: "",
        deliveryType: [],
        editAudit: 1,
        addAudit: 1,
        isGetLog: 0,
        storeOpen: "",
        isSendWx: 0,
        logoUrl: "",
        smsOpen: "",
        wxOpen: "",
        wxPhone: "",
        mpOpen: "",
        avatarUrl: "",
        txKey: "",
        userName: "",
        loginLogo: "",
        loginDesc: "",
        mpState: "",
        mpBinding: "",
        mpOauthUrl: "",
        enableMpOauth: "",
        isupload: false,
      },

      allType: [],
    };
  },
  provide: function () {
    return {
      form: this.form,
    };
  },
  created() {
    this.getParams();
  },

  methods: {
    /*获取配置数据*/
    getParams() {
      let self = this;
      SettingApi.storeDetail({}, true)
        .then((res) => {
          let vars = res.data;
          self.form = formatModel(self.form, vars);
          // self.form.checkedCities = res.data.deliveryType;
          // 转成整数，兼容组件
          for (let i = 0; i < self.form.deliveryType.length; i++) {
            self.form.deliveryType[i] = parseInt(self.form.deliveryType[i]);
          }
          self.form.kuaiDi100.customer = vars.kuaiDi100.customer;
          self.form.kuaiDi100.secret = vars.kuaiDi100.secret;
          self.form.kuaiDi100.key = vars.kuaiDi100.key;
          self.form.mpState = vars.mpState;
          self.form.smsOpen = vars.smsOpen;
          self.form.mpOauthUrl = vars.mpOauthUrl;
          self.form.enableMpOauth = vars.enableMpOauth;
          self.form.mpBinding = vars.mpBinding;
          self.allType = res.data.allType;
          localStorage.setItem("contens", vars.policy.privacy);
          localStorage.setItem("contens1", vars.policy.service);

          self.loading = false;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    /*提交*/
    onSubmit() {
      let self = this;
      let params = self.form;
      if (params.deliveryType.length < 1) {
        ElMessage({
          message: "配送方式至少选择一种！",
          type: "warning",
        });
        return;
      }

      self.$refs.form.validate((valid) => {
        if (valid) {
          self.loading = true;
          SettingApi.editStore(params, true)
            .then((data) => {
              self.loading = false;
              ElMessage({
                message: "恭喜你，商城设置成功",
                type: "success",
              });
              changStore(params);
              self.getParams();
            })
            .catch((error) => {
              self.loading = false;
            });
        }
      });
    },
  },
};
</script>
<style scoped>
.tips {
  color: #ccc;
}
.edit_container {
  position: relative !important;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

input[type="number"] {
  -moz-appearance: textfield;
}
</style>
